<template>
	<view class="content">
		<view class="message">
			<view class="title d-flex justify-content-between">
				<view>
					<text>报价信息</text>
					<text>订单号：21512562126</text>
				</view>
				<text @tap="next">保险详情 <uni-icons type="arrowright"></uni-icons></text>
			</view>
			<view class="guorenbaoxian">
				<text>国任保险</text>
				<view>
					<text>商业险保费(元)：<b>3650.00</b></text>
					<text>车船险保费(元)：<b>3650.00</b></text>
					<text>交强险保费(元)：<b>3650.00</b></text>
				</view>
			</view>

			<view class="btn">
				<text>保费总计(元)：<b style="color: #e60012;">3650.00</b></text>
				<view>
					<button>取消</button>
					<button type="warn">立即支付</button>
				</view>
			</view>
		</view>
		<u-border></u-border>
		<view class="title d-flex justify-content-between">
			<view>
				<text>报价信息</text>
			</view>
		</view>
		<view class="baodanxinxi">
			<view class="d-flex">
				<text>车牌号码</text>
				<text>粤AY0026</text>
			</View>
			<view>
				<text>被保人</text>
				<text>张亦山</text>
			</View>
			<view>
				<text>客户名称</text>
				<text>张一梦</text>
			</View>
			<view>
				<text>保单编号</text>
				<text>212512536510029</text>
			</View>
			<view>
				<text>下单工号</text>
				<text>021513115278667</text>
			</View>
			<view>
				<text>投保日期</text>
				<text>2018-10-09</text>
			</View>
			<view>
				<text>交强险起止日期</text>
				<text>2018-10-12 至 2019-10-12</text>
			</View>
			<view>
				<text>商业险起止日期</text>
				<text>2018-10-12 至 2019-10-12</text>
			</View>

			<view>
				<text>保单状态</text>
				<text>未生效</text>
			</View>
		</view>
		<u-border></u-border>
		<u-ts>
			备注
		</u-ts>
		<view class="bz">
			<text>备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注备注</text>
		</view>
		<u-border></u-border>
		<u-ts>
			配送信息
		</u-ts>

		<view class="baodanxinxi">
			<view class="d-flex">
				<text>收件人</text>
				<text>张亦山</text>
			</View>
			<view>
				<text>手机号码</text>
				<text>13625136727</text>
			</View>
			<view>
				<text>所属地区</text>
				<text>广东省 广州市 天河区</text>
			</View>
			<view>
				<text>详细地址</text>
				<text>科韵路36号</text>
			</View>
			<view>
				<text>配送方式</text>
				<text>快递邮寄</text>
			</View>
		</view>

		<u-border></u-border>





		<view class="titles">
			<view class="contents">
				<text>
				车辆信息
				</text>
				<view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		</view>



		<view class="titles">
			<view class="contents">
				<text>
					车主信息
				</text>
				<view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		</view>


		<view class="titles">
			<view class="contents">
				<text>
					投保人信息
				</text>
				<view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		</view>


		<view class="titles">
			<view class="contents">
				<text>
				被投人信息
				</text>
				<view>
					<uni-icons type="arrowright"></uni-icons>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	import border from '../../components/border.vue'
	import title from '../../components/ts.vue'
	export default {
		components: {
			'u-border': border,
			'u-ts': title,
		},
		data() {
			return {

			}
		},
		methods: {
			next() {
				uni.navigateTo({
					url: '/pages/baoxianxiangqing/baoxianxiangqing'
				})
			}, //前往保险详情页面
			ad() {
				console.log(1)
			}
		}
	}
</script>

<style scoped lang="scss">
	// 车辆信息
	.titles {
		display: flex;
		justify-content: space-between;
		height: 100upx;
		border-bottom: 1px solid #dadada;
		align-items: center;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.contents {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	// 备注
	.bz {
		padding: 30upx;
		box-sizing: border-box;
		font-size: 28upx;
		color: #333333;
	}

	// 保单信息
	.baodanxinxi {
		padding: 30upx;
		box-sizing: border-box;

		>view {
			display: flex;
			justify-content: space-between;

			text {
				display: inline-block;
			}
		}
	}

	.baodanxinxi>view text:nth-child(1) {
		color: #999999;
		font-size: 28upx;
		line-height: 60upx;
	}

	.baodanxinxi>view text:nth-child(2) {
		font-size: 28upx;
		color: #333333;
		line-height: 60upx;
	}

	/* 按钮 */
	.btn button:nth-child(2) {
		width: 140rpx;
		height: 56rpx;
		border-radius: 4rpx;
		white-space: nowrap;
		font-size: 28upx;
		line-height: 56upx;
		justify-content: center;
		display: flex;
		margin-left: 20upx;
	}

	.btn button:nth-child(1) {
		width: 84rpx;
		height: 56rpx;
		border-radius: 4rpx;
		white-space: nowrap;
		font-size: 28upx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120upx;
		padding: 30upx;
		box-sizing: border-box;

		>view {
			display: flex;
			align-items: center;
		}
	}

	/* 国任保险 */
	.guorenbaoxian {
		border-bottom: 1px solid #dadada;
		padding: 30upx;
		box-sizing: border-box;

		>view {
			display: flex;
			flex-direction: column;

			text {
				line-height: 25px;
				color: #a9a9a9;

				b {
					color: #333333;
					font-weight: 500;
				}
			}
		}

		>text {
			font-weight: 600;
		}
	}

	.title>text {
		font-size: 26upx;
	}

	.title>view text:nth-child(1) {
		font-size: 32upx;
		color: black;
		font-weight: 600;
	}

	.title>view text:nth-child(2) {
		font-size: 28upx;
		color: #999999;
		margin-left: 20upx;
	}

	.title {
		height: 100upx;
		border-bottom: 1px solid #dadada;
		align-items: center;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	/*  报价信息 */
	.message {
		width: 750upx;
		background-color: #ffffff;
	}

	page {
		height: 100vh;
	}
</style>
